﻿@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <div>
        <input id="startDate" type="month" value="2019-03" min="2019-01" max="2019-05" onchange="startDateChange(this.value)" />
        -
        <input id="endDate" type="month" value="2019-05" max="2019-12" min="2019-03" onchange="endDateChange(this.value)" />
    </div>
    <div id="main" style="width: 1000px;height:400px;margin: 20px auto"></div>
</div>


<script src="~/js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var stocks = ['平安银行', '贵州茅台', '中信建投', '华兴源创', '同达创业']
    //初始化数据展示茅台
    var selectData = {}
    for (var stock of stocks) {
        if (stock != "贵州茅台")
            selectData[stock] = false;
        else
            selectData[stock] = true;
    }
    var option = {
        title: {
            text: '上证指数相对收益'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            selected: selectData
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {

        },
        series: []
    };

    for (var stock of stocks) {
        option.series.push({
            name: stock,
            type: 'line',
            data: []
        })
    }   

    getDates()

    function startDateChange(value) {
        document.getElementById("endDate").setAttribute('min', value);
        getDates()
    }

    function endDateChange(value) {
        document.getElementById("startDate").setAttribute('max', value);
        getDates()
    }

    //获取时间范围
    function getDates() {
        var start = document.getElementById("startDate").value
        var end = document.getElementById("endDate").value
        fetch(`api/GetDates?start=${start}&end=${end}`).then(response => response.json())
            .then(result => {
                option.xAxis.data = result;
                option.legend.selected = selectData;
                var stockNames = [];
                for (var pro in selectData) {
                    if (selectData[pro]) {
                        stockNames.push(pro)
                    }
                }
                if (stockNames.length > 0) {
                    getRates(stockNames.join('|'));
                } else {
                    myChart.setOption(option);
                }
            })
            .catch(err => console.log('Request Failed', err));
    }

    //获取股票数据，用|隔开
    function getRates(stockNames) {
        var start = document.getElementById("startDate").value
        var end = document.getElementById("endDate").value
        fetch(`api/GetRates?start=${start}&end=${end}&stocks=${stockNames}`).then(response => response.json())
            .then(result => {
                for (var res in result) {
                    var conunt = option.xAxis.data.length - result[res].length
                    for (var i = 0; i < conunt; i++)
                        result[res].unshift(undefined)
                    option.series[stocks.indexOf(res)].data = result[res];
                }
                myChart.setOption(option);
            })
            .catch(err => console.log('Request Failed', err));
    }

    myChart.on('legendselectchanged', function (params) {
        selectData = params.selected
        if (option.series[stocks.indexOf(params.name)].data.length == 0) {
            getRates(params.name)
        }
    });
</script>